<template>
  <div class="itcrl">
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >     
        <!-- 使用 title 插槽来自定义标题 -->
        <actile v-for="(item,index) in list" :key="index" :titles='item'></actile>
    </van-list>
  </div>
</template>
<script>
import { getArticles } from '@/api/user.js'
import actile from '@/components/actile/actile.vue'
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      time:Date.now()
    }
  },
  //   获取父元素传过来的index
  props:(['title']),
  created(){
    this.onLoad()
  },
  components:{
    actile
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求   
      // 加载状态结束       
      try { 
        const parms = {
          channel_id: this.title, // 频道 id
          timestamp: this.time, // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
          with_top: 0 
        }               
        const lists = await getArticles(parms)  
        const listitme = lists.data.data.results
        this.list.push(...listitme)
        this.time = lists.data.data.pre_timestamp
        this.loading = false
        if (listitme.length === 0){
          this.finished = true
        } else {
          this.finished = false 
        }       
        console.log(lists)
      } catch (error) {
        console.log(error)
      }    
      // 数据全部加载完成     
    }
  }
  
}
</script>
<style lang="less">
  .itcrl{
      height: 79vh;
    overflow: auto;
  }
  .van-cell{
      text-align: left;
  }
  .title{
      font-size: 32px;
      color: #3a3a3a;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
  }
  .logi{
      display: flex;
      flex-direction: row;
      img{
          width: 1;
      }
  }
</style>
